<template>
  <div>
    <CategoryList :categories="categories" :del="del"></CategoryList>
    <CategoryPage></CategoryPage>
    <CategoryAdd :categories="categories" :add="add"></CategoryAdd>
  </div>
</template>

<script>
  import CategoryList from "./CategoryList";
  import CategoryAdd from "./CategoryAdd";
  import axios from 'axios';
  import CategoryPage from "./CategoryPage";

  export default {
    name: "CategoryManage",
    components: {
      CategoryList, CategoryAdd, CategoryPage
    },
    data() {
      return {
        categories: []
      }
    },
    methods: {
      add(category) {
        this.categories.push(category);
      },
      del(index) {
        this.categories.splice(index, 1)
      }
    },
    mounted() {
      console.log(this.apiUrl)
      axios.get(this.apiUrl + "/category/list").then(r => {
        this.categories = r.data.data;
      })
    }
  }
</script>

<style scoped>

</style>
